<template>
  <div id="dataMap"></div>
</template>

<script>
import { selectareas } from '../../../api/dataCenter';
import { findDictByCode } from '../../../api/index';
import ZhuZhou from '../../../assets/json/zhuzhou.json';
export default {
  name: 'dataMap',
  data () {
    return {
      name: [],
      data: [
                { name: '醴陵市', value: 12016 },
                { name: '荷塘区', value: 10779 },
                { name: '高新区(天元区)', value: 17824 },
                { name: '渌口区', value: 1182 },
                { name: '攸县', value: 8365 },
                { name: '炎陵县', value: 2355 },
                { name: '茶陵县', value: 6054 },
                { name: '芦淞区', value: 6640 },
                { name: '石峰区', value: 10865 },
              ],
      max: 0
    };
  },
  methods: {
    drawLine () {
      this.$echarts.registerMap('ZhuZhou', ZhuZhou);
      let myChart = this.$echarts.init(document.getElementById('dataMap'));
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}:{c}'
        },
        visualMap: {
          min: 1182,
          max: 17824,
          realtime: false,
          calculable: true,
          itemWidth: 5,
          textStyle: {
            color: '#fff'
          },
          inRange: {
            color: ['#0614A9', '#0076FF', '#00E1FF']
          }
        },
        series: [
          {
            type: 'map',
            mapType: 'ZhuZhou', // 自定义扩展图表类型
            label: {
              position: 'insideRight',
              show: true,
              formatter: '{b}\n{c}',
              color: '#fff'
            },
            data:
              this.data
            //     nameMap: {
            //         'Central and Western': '中西区',
            //         'Eastern': '东区',
            //         'Islands': '离岛',
            //         'Kowloon City': '九龙城',
            //         'Kwai Tsing': '葵青',
            //         'Kwun Tong': '观塘',
            //         North: '北区',
            //         'Sai Kung': '西贡',
            //         'Sha Tin': '沙田',
            //         'Sham Shui Po': '深水埗',
            //         Southern: '南区',
            //         'Tai Po': '大埔',
            //         'Tsuen Wan': '荃湾',
            //         'Tuen Mun': '屯门',
            //         'Wan Chai': '湾仔',
            //         'Wong Tai Sin': '黄大仙',
            //         'Yau Tsim Mong': '油尖旺',
            //         'Yuen Long': '元朗'
            //     }
          }
        ]
      });
    }
  },
  mounted () {
    // let obj = {};
    // findDictByCode('area')
    //   .then(data => {
    //     if (data.success) {
    //       console.log(data);
    //       data.data.forEach(item => {
    //         obj[item.name] = item.val;
    //       });
    //       console.log(obj);
    //       return selectareas();
    //     }
    //   })
    //   .then(data => {
    //     console.log(data);
    //     if (data.success) {
    //       this.data = Object.keys(obj).map(val => {
    //         let dataItem = { name: val };
    //         console.log(obj);
    //         if (obj[val] != 538) {
    //           console.log(val);
    //           dataItem.value = data.data.find(item => {
    //             return obj[val] === item.area;
    //           }) ? data.data.find(item => {
    //             return obj[val] === item.area;
    //           }).areaCount : 0;
    //           return dataItem;
    //         }
    //       });
    //       this.name = Object.keys(obj);
    //       console.log(this.data);

    //       this.max = this.data.sort((a, b) => b.value - a.value)[0].value;
    //     }
    //   });
    let num = 0;
    this.data.forEach(i => {
      num += i.value;
    })
    console.log(num);
    this.drawLine();
  }
};
</script>

<style scoped>
#dataMap {
    width: 400px;
    color: rgba(255, 255, 255, 1);
    height: 680px;
    margin: 0 auto;
}
</style>